<template>
  <section class="pagemaker-form-widget-inner">
    <div v-if="list.length == 0" class="empty">
      <div class="icon">
        <svg-icon icon-class="empty-icon" />
      </div>
    </div>
    <section v-for="item in list" :key="item.key" class="list">
      <div class="sort">{{ item.title }}
        <span v-if="item.title==='数据设置'" style="color: red;">（高级设置）</span>
      </div>
      <div class="comps">
        <v-form ref="form" :fields="item.fields" @change="change" />
      </div>
    </section>
  </section>
</template>
<script>
import VForm from './../../form/index.vue'
import emitter from '@/utils/emitter'
import { randomString } from '@/utils'
export default {
  name: 'PagemakerFormWidget',
  components: { VForm },
  mixins: [emitter],
  inject: ['focusForm', 'focusId'],
  data() {
    return {
      list: [],
      a: {
        id: '123123',
        classifyId: '1',
        name: '分类组件',
        code: 'category',
        varList: [
          {
            name: '分类ID',
            code: '${self|id}'
          }
        ],
        requestList: [
          {
            name: '分类列表',
            code: 'classify'
          }
        ],
        condition: [
          {
            name: '改变',
            code: 'change'
          }
        ],
        operate: [
          {
            name: '刷新',
            code: 'refresh'
          }
        ]
      }
    }
  },
  computed: {
    _focusForm() {
      return this.focusForm()
    },
    _focusId() {
      return this.focusId()
    }
  },
  watch: {
    _focusId: {
      handler() {
        this.list = this._focusForm.map((a) => {
          return {
            ...a,
            key: randomString(8)
          }
        })
      },
      deep: true
    }
  },
  methods: {
    change() {
      const r = {}
      return this.$refs.form.reduce((a, form) => {
        return a.then(() => {
          return form.getValue().then((value) => {
            Object.assign(r, value || {})
          })
        })
      }, Promise.resolve()).then(() => {
        this.dispatch_event('widget-form-change', r)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/utility/position.scss';
@import '@/styles/utility/center.scss';
.pagemaker-form-widget-inner {
  @include absolute();
  overflow: auto;
  .empty {
    line-height: 80px;
    @include center();
    padding: 20px 0 20px 0;
    pointer-events: none;
    color: $f3;
    .icon {
      height: 50px;
      width: 50px;
      font-size: 30px;
      background: $f8;
      border-radius: 50%;
      border: 1px solid $f6;
      @include center();
    }
  }
  .list {
    .sort {
      line-height: 35px;
      padding: 0 15px 0 15px;
      font-size: 12px;
      background: $f8;
      border-bottom: 1px solid $f6;
      position: sticky;
      z-index: 9;
      top: 0;
      color: $a1;
    }
    .comps {
      border-bottom: 1px solid $f6;
      padding: 15px;
      .inner {
        margin-bottom: 10px;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
